<template>
	<view>
		<view class="">
			
		</view>
		<view>
			<canvas class="charts" canvas-id="charts1" id="charts1" @touchend="tap"/>
		</view>
	</view>
</template>

<script>
	import uCharts  from '../../../../src/pages/u-charts.js';
	var uChartsInstance = {};
	export default {
		data() {
			return {
				cWidth: 750,
				cHeight: 500
			}
		},
		 onReady() {
		    //这里的 750 对应 css .charts 的 width
		    this.cWidth = uni.upx2px(750);
		    //这里的 500 对应 css .charts 的 height
		    this.cHeight = uni.upx2px(500);
		    this.getServerData();
		  },
		methods: {
			getServerData() {
			    //模拟从服务器获取数据时的延时
			    setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
			            categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
			            series: [
							{
								name: "采购请求",
								data: [35,8,25,37,4,20]
							},
							{
								name: "退货请求",
								data: [50,40,65,60,44,68]
							}
			            ]
			        };
			        this.drawCharts('charts1', res);
			      }, 200);
			    },
			    drawCharts(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			      uChartsInstance[id] = new uCharts({
			        type: "line",
			        context: ctx,
			        width: this.cWidth,
			        height: this.cHeight,
			        categories: data.categories,
			        series: data.series,
			        animation: true,
			        background: "#FFFFFF",
			        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			        padding: [15,10,0,15],
			        legend: {},
			        xAxis: {
			          disableGrid: true
			        },
			        yAxis: {
			          gridType: "dash",
			          dashLength: 2
			        },
			        extra: {
			          line: {
			            type: "curve",
			            width: 2
			          }
			        }
			      });
			    },
			    tap(e){
			      uChartsInstance[e.target.id].touchLegend(e);
			      uChartsInstance[e.target.id].showToolTip(e);
			    }
			  }
			};
			</script>

<style lang="scss">
	.charts{
		padding: 5px;
	    width: 100%;
	    height: 500rpx;
	}
	.wrap {
		padding: 15rpx;
	}
	.bbody {
		// margin-top: -50px;
		background: #FFF;
		margin-left:10rpx;
		margin-right: 10rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
		border-radius: 15rpx;
		.grid-text {
			font-size: 30rpx;
			color: #444;
			padding: 10rpx 0 10rpx 0rpx;
			box-sizing: border-box;
		}
	}
</style>
